<template>
    <div>
      <!--            :action="CMBASE.baseUploadFileAction"-->
        <el-upload
            :action="CMBASE.baseUploadAction"
            accept="*"
            :limit="limit"
            :on-exceed="uploadOverRun"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :on-preview="handlePictureCardPreview"
            :on-error="handleError"
            :file-list="fileList"
            list-type="text"
             >
            <el-button size="small" type="primary">点击上传</el-button>
<!--             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
<!--         <el-dialog :visible.sync="dialogVisible"  width="33%" >-->
<!--            <img style="width: 100%;height: 100%;object-fit: contain" :src="dialogImageUrl" alt="">-->
<!--        </el-dialog>-->
    </div>
</template>
<script>
import CryptoJS from "_utils/crypto";

export default {
    props: {
        value: {
            type: String
        },
        fileListStr: {
            type: String
        },
        limit: {
            type: Number,
            default: 5
        }
    },
    
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            images: [],
            fileList: []
        }
    },
    watch: {
        value ( newValue, oldValue) {
            console.log(newValue , '2222222222')
            this.fillFileList( newValue );
        }
    },
    created() {
        console.log( this.fileListStr );
        if (this.value) {
          this.fillFileList( this.value )
          // console.log("value",this.value)
          //   // this.fileList = this.value.split(",").map((item) => ({ url: this.CMBASE.baseFileContext + item }));
          //   this.fileList = this.value.split(",").map((item) => ({ url:  item }));
        }
    },
    methods: {

        fillFileList( value  ){
            // debugger
            // this.fileList.push( { url: this.CMBASE.baseUploadAction + value } )
            // this.fileList.push( { url: value } )
          let fileListTemp = [];
          let tempArray =  value =='' ? [] : JSON.parse(  value  );
          tempArray.forEach(element => {
            fileListTemp.push( {
              name : element.name ,
              url:  element.url
            } )
          });
          this.fileList = fileListTemp ;
        },

        /* 多图上传预览 */
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        /* 多图上传限制 */
        uploadOverRun() {
            this.$message({
                type: 'error',
                message: '上传文件个数超出限制!'
            })
        },
        /* 多图上传移除 */
        handleRemove(file, fileList) {
            console.log("value", this.value);
            console.log("file", file);
            console.log("fileList", fileList);

            let tempArray = this.value === '' ? [] : JSON.parse(this.value);
            console.log("tempArray", tempArray);

            // 使用 filter 方法过滤掉需要删除的文件
            tempArray = tempArray.filter(item => {
                let url;
                // 后台已有照片
                if (file.response === undefined) {
                    url = file.url;
                } else {
                    url = file.response.path;
                }
                console.log("url", url);
                console.log("item.url", item.url);
                // 返回不匹配的项，保留未删除的文件
                return !url.includes(item.url);
            });

            console.log("tempArray after filter", tempArray);
            this.$emit('input', JSON.stringify(tempArray));
        },
        // 上传错误时的钩子
        handleError() {
            this.$message({ message: '上传失败', type: 'error' })
        },
        /* 文件上传成功 */
        handleSuccess(res,file, fileList) {
          console.log('res: ', res)
          res.data = JSON.parse(CryptoJS.Decrypt(res.data))
          console.log('file: ', file)
          console.log('data',res.data)

          // let tempArray =  this.value=='' ? [] : JSON.parse(  this.value  );
          if (fileList.every(item => item.status == 'success')) {
            fileList.map(item => {
              console.log( item );
              if(item.response) {
                this.fileList.push({
                  name: item.name,
                  url: item.response.data.path
                })
              }
            })
          }
          setTimeout(() => {
            console.log('------fileList: ', fileList)
            this.$emit('input',  JSON.stringify( this.fileList )  )
          }, 500);
        }
    }
}
</script>
<style>
  .el-upload-list{
    display: inline-grid;
  }
</style>